home *** CD-ROM | disk | FTP | other *** search
/ Clickx 96 / Clickx 96.iso / software / tools / tool / xbmc-10.1.exe / addons / webinterface.default / js / jquery.lazyload.js < prev    next >
Encoding:
JavaScript  |  2011-03-08  |  6.2 KB  |  165 lines
  1. /*
  2.  * Lazy Load - jQuery plugin for lazy loading images
  3.  *
  4.  * Copyright (c) 2007-2009 Mika Tuupola
  5.  *
  6.  * Licensed under the MIT license:
  7.  *   http://www.opensource.org/licenses/mit-license.php
  8.  *
  9.  * Project home:
  10.  *   http://www.appelsiini.net/projects/lazyload
  11.  *
  12.  * Version:  1.5.0
  13.  *
  14.  */
  15.  
  16. (function($) {
  17.  
  18.     $.fn.lazyload = function(options) {
  19.         var settings = {
  20.             threshold    : 0,
  21.             failurelimit : 0,
  22.             event        : "scroll",
  23.             effect       : "show",
  24.             container    : window
  25.         };
  26.                 
  27.         if(options) {
  28.             $.extend(settings, options);
  29.         }
  30.  
  31.         /* Fire one scroll event per scroll. Not one scroll event per image. */
  32.         var elements = this;
  33.         if ("scroll" == settings.event) {
  34.             $(settings.container).bind("scroll", function(event) {
  35.                 
  36.                 var counter = 0;
  37.                 elements.each(function() {
  38.                     if ($.abovethetop(this, settings) ||
  39.                         $.leftofbegin(this, settings)) {
  40.                             /* Nothing. */
  41.                     } else if (!$.belowthefold(this, settings) &&
  42.                         !$.rightoffold(this, settings)) {
  43.                             $(this).trigger("appear");
  44.                     } else {
  45.                         if (counter++ > settings.failurelimit) {
  46.                             return false;
  47.                         }
  48.                     }
  49.                 });
  50.                 /* Remove image from array so it is not looped next time. */
  51.                 var temp = $.grep(elements, function(element) {
  52.                     return !element.loaded;
  53.                 });
  54.                 elements = $(temp);
  55.             });
  56.         }
  57.         
  58.         this.each(function() {
  59.             var self = this;
  60.             
  61.             /* Save original only if it is not defined in HTML. */
  62.             if (undefined == $(self).attr("original")) {
  63.                 $(self).attr("original", $(self).attr("src"));     
  64.             }
  65.  
  66.             if ("scroll" != settings.event || 
  67.                     undefined == $(self).attr("src") || 
  68.                     settings.placeholder == $(self).attr("src") || 
  69.                     ($.abovethetop(self, settings) ||
  70.                      $.leftofbegin(self, settings) || 
  71.                      $.belowthefold(self, settings) || 
  72.                      $.rightoffold(self, settings) )) {
  73.                         
  74.                 if (settings.placeholder) {
  75.                     $(self).attr("src", settings.placeholder);      
  76.                 } else {
  77.                     $(self).removeAttr("src");
  78.                 }
  79.                 self.loaded = false;
  80.             } else {
  81.                 self.loaded = true;
  82.             }
  83.             
  84.             /* When appear is triggered load original image. */
  85.             $(self).one("appear", function() {
  86.                 if (!this.loaded) {
  87.                     $("<img />")
  88.                         .bind("load", function() {
  89.                             $(self)
  90.                                 .hide()
  91.                                 .attr("src", $(self).attr("original"))
  92.                                 [settings.effect](settings.effectspeed);
  93.                             self.loaded = true;
  94.                         })
  95.                         .attr("src", $(self).attr("original"));
  96.                 };
  97.             });
  98.  
  99.             /* When wanted event is triggered load original image */
  100.             /* by triggering appear.                              */
  101.             if ("scroll" != settings.event) {
  102.                 $(self).bind(settings.event, function(event) {
  103.                     if (!self.loaded) {
  104.                         $(self).trigger("appear");
  105.                     }
  106.                 });
  107.             }
  108.         });
  109.         
  110.         /* Force initial check if images should appear. */
  111.         $(settings.container).trigger(settings.event);
  112.         
  113.         return this;
  114.  
  115.     };
  116.  
  117.     /* Convenience methods in jQuery namespace.           */
  118.     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
  119.  
  120.     $.belowthefold = function(element, settings) {
  121.         if (settings.container === undefined || settings.container === window) {
  122.             var fold = $(window).height() + $(window).scrollTop();
  123.         } else {
  124.             var fold = $(settings.container).offset().top + $(settings.container).height();
  125.         }
  126.         return fold <= $(element).offset().top - settings.threshold;
  127.     };
  128.     
  129.     $.rightoffold = function(element, settings) {
  130.         if (settings.container === undefined || settings.container === window) {
  131.             var fold = $(window).width() + $(window).scrollLeft();
  132.         } else {
  133.             var fold = $(settings.container).offset().left + $(settings.container).width();
  134.         }
  135.         return fold <= $(element).offset().left - settings.threshold;
  136.     };
  137.         
  138.     $.abovethetop = function(element, settings) {
  139.         if (settings.container === undefined || settings.container === window) {
  140.             var fold = $(window).scrollTop();
  141.         } else {
  142.             var fold = $(settings.container).offset().top;
  143.         }
  144.         return fold >= $(element).offset().top + settings.threshold  + $(element).height();
  145.     };
  146.     
  147.     $.leftofbegin = function(element, settings) {
  148.         if (settings.container === undefined || settings.container === window) {
  149.             var fold = $(window).scrollLeft();
  150.         } else {
  151.             var fold = $(settings.container).offset().left;
  152.         }
  153.         return fold >= $(element).offset().left + settings.threshold + $(element).width();
  154.     };
  155.     /* Custom selectors for your convenience.   */
  156.     /* Use as $("img:below-the-fold").something() */
  157.  
  158.     $.extend($.expr[':'], {
  159.         "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
  160.         "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
  161.         "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
  162.         "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
  163.     });
  164.     
  165. })(jQuery);